<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('预测结果')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content" id="main">

</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script th:src="@{/js/echarts.min.js}"></script>
<script th:src="@{/js/stock.js}"></script>
<script th:inline="javascript">

    var f1 = [[${#dates.format(createdate, 'yyyy-MM-dd')}]];
    var prefix1 = ctx + "stock2/RESULT";
    $.ajax({
        url : prefix1 + '/list',
        type : 'post',
        dataType : 'json',
        cache : false,
        data : {
            datetime : f1,
            pageNum:1,
            pageSize:200
        },
        success : function(result) {
            var list = result.rows;
            for(j = 0,len=list.length; j < len; j++) {
                var div_id = "div_" + list[j].symbol;
                var industry = list[j].industry;
                var concept = list[j].concept;
                var tabimg_id = "tabimg_" + list[j].symbol;
                var new_row = "<div class=\"row\">"+
                    "	<div class=\"col-sm-12\">"+
                    "		<div class=\"ibox float-e-margins\">"+
                    "			<div class=\"ibox-title\">"+
                    "				<h5>" + concept + "股，" + industry + "行业，B点表示参考点</h5>"+
                    "				<div class=\"pull-right\">"+
                    "                   <h5>仅供参考 下图兰色表示40天内历史走势，黄色预测的是未来40天</h5>"+
                    "				</div>"+
                    "			</div>"+
                    "			<div class=\"ibox-content\">"+
                    "				<div class=\"row\">"+
                    "					<div class=\"col-sm-6\">"+
                    "                       <div id='"+div_id+"' style='width:800px;height:400px;'></div>"+
                    "					</div>"+
                    "					<div class=\"col-sm-6\">"+
                    "                       <div class=\"tabs-container\" id=\"" + tabimg_id + "\"></div>"+
                    "					</div>"+
                    "				</div>"+
                    "			</div>"+
                    "		</div>"+
                    "	</div>"+
                    "</div>";

                $("#main").append(new_row);
                foretellGetFun(list[j].symbol, div_id);
                getImgAddr(list[j].symbol, tabimg_id);


            }

        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert("error");
        }
    })

    function getImgAddr(symbol, tabimg_id){
        $.ajax({
            url : prefix1 + '/list',
            type : 'post',
            dataType : 'json',
            cache : false,
            data : {
                symbol : symbol
            },
            success : function(result) {
                var list = result.rows;
                var nav_tabs = "<ul class=\"nav nav-tabs\">";
                var nav_tabs_lis = "";
                var tab_content = "<div class=\"tab-content\">";
                var tab_content_div = "";
                for(j = 0,len=list.length;  j < len; j++) {
              //for(j = 0,len=list.length; len > 7 ? j < 7 : j < len; j++) {
                    // console.log("#####" + list[j].datetime.substr(0,10) + " " + list[j].symbol);
                    var datetimes = list[j].datetime.substr(0,10);
                    var dirforder1 = list[j].symbol.substr(0, 1);
                    var dirforder2 = datetimes.substr(0, 4);
                    var imgsrc = "/profile/upload/" + dirforder1 + "/" + dirforder2 + "/" + list[j].symbol + "_" + datetimes + ".jpg";
                    if(datetimes>'2020-07-14'){
                        imgsrc = "/profile/upload/" + dirforder1 + "/" + dirforder2 + "/" + list[j].symbol + "_" + datetimes + ".png";
                    }

                    if(j == len-1){
                        nav_tabs_lis = "<li class=\"active\"><a aria-expanded=\"true\" href=\"#tab_" + list[j].symbol + "_" + datetimes +"\" data-toggle=\"tab\">" + datetimes + "</a></li>" + nav_tabs_lis;
                        tab_content_div = "<div class=\"tab-pane active\" id=\"tab_" + list[j].symbol + "_" + datetimes + "\"><div class=\"panel-body\">"+ "<img style=\"position: relative; left:-30px; width:800px; height:300px;\" src=\""+imgsrc+"\"/>" +"</div></div>"  + tab_content_div;
                    }else{
                        //tab标签的日期从小到大排序
                        //nav_tabs_lis = nav_tabs_lis + "<li><a aria-expanded=\"false\" href=\"#tab_" + list[j].symbol + "_" + datetimes + "\" data-toggle=\"tab\">" + datetimes + "</a></li>" ;
                        //tab_content_div = tab_content_div + "<div class=\"tab-pane\" id=\"tab_" + list[j].symbol + "_" + datetimes + "\"><div class=\"panel-body\">"+ "<img style=\"position: relative; left:-30px; width:800px; height:300px;\" src=\""+imgsrc+"\"/>" +"</div></div>" ;
                        //tab标签的日期从大到小排序
                        nav_tabs_lis = "<li><a aria-expanded=\"false\" href=\"#tab_" + list[j].symbol + "_" + datetimes + "\" data-toggle=\"tab\">" + datetimes + "</a></li>" + nav_tabs_lis;
                        tab_content_div = "<div class=\"tab-pane\" id=\"tab_" + list[j].symbol + "_" + datetimes + "\"><div class=\"panel-body\">"+ "<img style=\"position: relative; left:-30px; width:800px; height:300px;\" src=\""+imgsrc+"\"/>" +"</div></div>" + tab_content_div;
                    }

                }
                var t = nav_tabs + nav_tabs_lis + "</ul>" + tab_content + tab_content_div + "</div>"
                $("#"+tabimg_id).append(t);
            },
            error : function(XMLHttpRequest, textStatus, errorThrown) {
                alert("error");
            }
        })
    }

    function submitHandler() {
        $.modal.close();
    }

</script>
</body>
</html>